<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout}">

<head>
    <title layout:title-pattern="权限管理"></title>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <style>
        .permission-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }
        .permission-card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            transform: translateY(-3px);
        }
        .permission-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .permission-badge {
            font-size: 0.85rem;
            padding: 3px 8px;
        }
        .permission-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
        }
        .permission-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: white;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }
        .permission-item input {
            margin-right: 8px;
        }
        .permission-mask {
            font-family: monospace;
            font-size: 1.2rem;
            background: #e9ecef;
            padding: 5px 10px;
            border-radius: 4px;
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .pagination .page-link {
            color: #0d6efd;
        }
        .pagination .page-item.disabled .page-link {
            color: #6c757d;
        }
    </style>
    <script>
        function confirmDelete(userId, event) {
            event?.preventDefault();
            if (confirm('确定删除该用户吗？此操作不可恢复！')) {
                document.getElementById('deleteUserId').value = userId;
                document.getElementById('deleteForm').submit();
            }
        }
    </script>
</head>

<body>
<div layout:fragment="content">
    <div class="container mt-4">
        <!-- 消息提示 -->
        <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
        <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

        <!-- 用户搜索和操作区域 -->


        <!-- 权限管理表格 -->
        <div class="card">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <span>用户权限管理</span>

                <span class="badge bg-info">
                    [[${page.totalElements}]] 个用户 (第 [[${page.number + 1}]]/[[${page.totalPages}]])
                </span>
            </div>

            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <form class="d-flex w-50" th:action="@{/api/permission}" method="get">
                        <div class="input-group flat-input-group">
                            <input type="text" name="search" class="form-control flat-input"
                                   placeholder="搜索用户名或邮箱……" th:value="${search}">
                            <button type="submit" class="btn flat-btn">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
                <!-- 用户权限列表 -->
                <div th:each="user : ${content}" class="permission-card">
                    <form th:action="@{/api/permission/update}" method="post">
                        <div class="permission-header">
                            <div>
                                <h5 class="mb-0">[[${user.username}]]</h5>
                                <small class="text-muted">[[${user.email}]]</small>
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-sm btn-success me-2"
                                        th:if="${session.user.hasRole(4) || session.user.hasRole(8)}">
                                    <i class="bi bi-check-circle"></i> 保存权限
                                </button>
                                <button type="button" class="btn btn-sm btn-danger"
                                        th:onclick="|confirmDelete(${user.id}, event)|"
                                        th:if="${session.user.hasRole(4) || session.user.hasRole(8)}">
                                    <i class="bi bi-trash"></i> 删除用户
                                </button>
                            </div>
                        </div>

                        <input type="hidden" name="userId" th:value="${user.id}">

                        <div class="permission-grid">
                            <div class="permission-item">
                                <input type="checkbox" name="roles" value="8"
                                       th:checked="${user.hasRole(8)}">
                                <span>最高权限</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="roles" value="4"
                                       th:checked="${user.hasRole(4)}">
                                <span>管理权限</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="roles" value="2"
                                       th:checked="${user.hasRole(2)}">
                                <span>用户权限</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="roles" value="1"
                                       th:checked="${user.hasRole(1)}">
                                <span>允许登录</span>
                            </div>
                        </div>
                        <div class="permission-grid">
                            <div class="permission-item">
                                <input type="checkbox" name="permissions" value="8"
                                       th:checked="${user.hasPermission(8)}">
                                <span>药品列表</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="permissions" value="4"
                                       th:checked="${user.hasPermission(4)}">
                                <span>通知查询</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="permissions" value="2"
                                       th:checked="${user.hasPermission(2)}">
                                <span>登录日志</span>
                            </div>

                            <div class="permission-item">
                                <input type="checkbox" name="permissions" value="1"
                                       th:checked="${user.hasPermission(1)}">
                                <span>权限管理</span>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 分页导航 -->
                <nav th:if="${page.totalPages > 1}" class="mt-4">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页 -->
                        <li class="page-item" th:classappend="${page.first} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/api/permission(search=${search}, page=${page.number - 1})}">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>

                        <!-- 页码 -->
                        <li th:each="pageNum : ${#numbers.sequence(1, page.totalPages)}"
                            class="page-item" th:classappend="${pageNum == page.number + 1} ? 'active' : ''">
                            <a class="page-link" th:href="@{/api/permission(search=${search}, page=${pageNum - 1})}">
                                [[${pageNum}]]
                            </a>
                        </li>

                        <!-- 下一页 -->
                        <li class="page-item" th:classappend="${page.last} ? 'disabled' : ''">
                            <a class="page-link" th:href="@{/api/permission(search=${search}, page=${page.number + 1})}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 删除用户表单 -->
    <form id="deleteForm" th:action="@{/api/permission/delete}" method="post" class="d-none">
        <input type="hidden" name="userId" id="deleteUserId">
    </form>
</div>
</body>
</html>